<template>
  <div class="commandpower">
    <span>CommandPowerPage 指令权限页面</span>
    <a-calendar v-model:value="value">
      <template #dateCellRender="{ current: value }">
        <ul class="events">
          <li v-for="item in getListData(value)" :key="item.content">
            <a-badge :status="item.type" :text="item.content" />
          </li>
        </ul>
      </template>
      <template #monthCellRender="{ current: value }">
        <div v-if="getMonthData(value)" class="notes-month">
          <section>{{ getMonthData(value) }}</section>
          <span>Backlog number</span>
        </div>
      </template>
    </a-calendar>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const value = ref();

    const getListData = value => {
      let listData;

      switch (value.date()) {
        case 8:
          listData = [
            {
              type: 'warning',
              content: 'This is warning event.',
            },
            {
              type: 'success',
              content: 'This is usual event.',
            },
          ];
          break;

        case 10:
          listData = [
            {
              type: 'warning',
              content: 'This is warning event.',
            },
            {
              type: 'success',
              content: 'This is usual event.',
            },
            {
              type: 'error',
              content: 'This is error event.',
            },
          ];
          break;

        case 15:
          listData = [
            {
              type: 'warning',
              content: 'This is warning event',
            },
            {
              type: 'success',
              content: 'This is very long usual event。。....',
            },
            {
              type: 'error',
              content: 'This is error event 1.',
            },
            {
              type: 'error',
              content: 'This is error event 2.',
            },
            {
              type: 'error',
              content: 'This is error event 3.',
            },
            {
              type: 'error',
              content: 'This is error event 4.',
            },
          ];
          break;

        default:
      }

      return listData || [];
    };

    const getMonthData = value => {
      if (value.month() === 8) {
        return 1394;
      }
    };

    return {
      value,
      getListData,
      getMonthData,
    };
  },
});
</script>

<style scoped>
.commandpower {
  width: 100%;
  height: 100%;
  /* text-align: center; */
  font-size: 20px;
  background: #a7d6da;
  /* vertical-align: middle; */
  /* line-height: 480px; */
  color: #fff;
}
</style>